import {Component, Input} from '@angular/core';

@Component({
  selector: 'c-signal',
  template: `
    <div class="wrap-signal">
      <div class="one item" [ngClass]="signal>5?'bg-blue':''"></div>
      <div class="two item" [ngClass]="signal>10?'bg-blue':''"></div>
      <div class="three item" [ngClass]="signal>15?'bg-blue':''"></div>
      <div class="four item" [ngClass]="signal>20?'bg-blue':''"></div>
      <div class="five item" [ngClass]="signal>25?'bg-blue':''"></div>
      <div class="close" *ngIf="signal <5">x</div>
    </div>
  `,
  styles: [
      `
      .wrap-signal {
        display: flex;
        align-items: flex-end;
        position: relative;
      }

      .close {
        position: absolute;
        top: -8px;
        left: 0px;
        /*font-size: 5px;*/
      }

      .item {
        margin-left: 3px;
        width: 2px;
        background-color: #999;
      }

      .one {
        height: 0.2rem;
      }

      .two {
        height: 0.45rem;
      }

      .three {
        height: 0.7rem;
      }

      .four {
        height: 0.95rem;
      }

      .five {
        height: 1.2rem;
      }

      .bg-blue {
        background-color: #1890ff;
      }
    `
  ]
})
export class SignalComponent {

  @Input() signal: any;

}
